<template>
  <div class="container">
    <div class="main">
      <div class="main_content">
        <div class="main_header">
          <a-steps :current="currentIndex">
            <a-step>
              <!-- <span slot="title">Finished</span> -->
              <template slot="title"> 题目分类 </template>
              <span slot="description">作为题目分类的依据</span>
            </a-step>
            <a-step title="题目内容" description="对题目信息的填充" />
            <a-step title="答案绑定" description="将答案与题目进行绑定" />
          </a-steps>
        </div>
        <div class="main_table">
          <!-- data-source 数据源,column 列名  row-selection列表项是否可选择	-->
          <!-- rowSelection 是计算属性进行加工处理 -->
          <a-form-model
            ref="ruleForm"
            :model="form"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-tabs
              :activeKey="activeKey"
              default-active-key="1"
              :tab-position="mode"
              :style="{ height: '800px' }"
              @change="change"
            >
              <a-tab-pane tab="题目分类" key="1">
                <a-form-model-item
                  ref="level"
                  label="请设置题目难度"
                  prop="level"
                >
                  <a-input
                    v-model="form.level"
                    @blur="
                      () => {
                        $refs.level.onFieldBlur();
                      }
                    "
                  />
                </a-form-model-item>
                <a-form-model-item label="题目分类" prop="category">
                  <a-select
                    v-model="form.category"
                    placeholder="请选择对应的题目分类"
                  >
                    <a-select-option
                      v-for="item in type_list"
                      :key="item.id"
                      :value="item.id"
                    >
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
                <!-- prop 校验对应名字 -->
                <a-form-model-item label="题目类型" prop="type">
                  <a-radio-group v-model="form.type">
                    <a-radio value="1"> 单选 </a-radio>
                    <a-radio value="2"> 多选 </a-radio>
                    <a-radio value="3"> 判断 </a-radio>
                  </a-radio-group>
                </a-form-model-item>
                <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                  <a-button type="primary" @click="onSubmit"> 下一页 </a-button>
                  <a-button style="margin-left: 10px" @click="resetForm">
                    重置
                  </a-button>
                </a-form-model-item>
              </a-tab-pane>
              <a-tab-pane tab="题目内容" key="2">
                <quill-editor v-model="form.content" style="height: 250px">
                </quill-editor>
                <a-button type="primary" class="btn_finish" @click="toNextPane">
                  完成
                </a-button>
              </a-tab-pane>
              <a-tab-pane
                tab="题目选项及答案"
                key="3"
                style="height: 200px; margin-top: 40px"
              >
                <a-form-model
                  ref="ruleForm2"
                  :model="form_last"
                  :rules="rules"
                  :label-col="labelCol"
                  :wrapper-col="wrapperCol"
                >
                  <!-- 选择题显示 -->
                  <div v-if="form.type != '3'">
                    <a-form-model-item
                      ref="optionA"
                      label="A选项"
                      prop="optionA"
                    >
                      <a-input
                        v-model="form_last.optionA"
                        @blur="
                          () => {
                            $refs.optionA.onFieldBlur();
                          }
                        "
                      />
                    </a-form-model-item>
                    <a-form-model-item
                      ref="optionB"
                      label="B选项"
                      prop="optionB"
                    >
                      <a-input
                        v-model="form_last.optionB"
                        @blur="
                          () => {
                            $refs.optionB.onFieldBlur();
                          }
                        "
                      />
                    </a-form-model-item>
                    <a-form-model-item label="C选项">
                      <a-input v-model="form_last.optionC" />
                    </a-form-model-item>
                    <a-form-model-item label="D选项">
                      <a-input v-model="form_last.optionD" />
                    </a-form-model-item>
                    <!-- 1是单选 2是多选-->
                    <a-form-model-item
                      label="答案"
                      prop="answer"
                      ref="answer"
                      v-if="form.type == 1"
                    >
                      <a-radio-group v-model="form.is_single_checkbox">
                        <a-radio-button value="A"> A</a-radio-button>
                        <a-radio-button value="B"> B</a-radio-button>
                        <a-radio-button value="C" :disabled="allow_chooseC">
                          C</a-radio-button
                        >
                        <a-radio-button value="D" :disabled="allow_chooseD">
                          D</a-radio-button
                        >
                      </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item
                      label="答案"
                      prop="answer"
                      ref="answer"
                      v-if="form.type == 2"
                    >
                      <a-checkbox-group v-model="form_last.answer">
                        <a-checkbox value="A" name="type"> A </a-checkbox>
                        <a-checkbox value="B" name="type"> B </a-checkbox>
                        <a-checkbox
                          value="C"
                          name="type"
                          :disabled="allow_chooseC"
                        >
                          C
                        </a-checkbox>
                        <a-checkbox
                          value="D"
                          name="type"
                          :disabled="allow_chooseD"
                        >
                          D
                        </a-checkbox>
                      </a-checkbox-group>
                    </a-form-model-item>
                  </div>
                  <!-- 判断题显示  用单选框-->
                  <div v-if="form.type == '3'">
                    <a-form-model-item
                      ref="optionA"
                      label="正确选项"
                      prop="optionA"
                    >
                      <a-input
                        v-model="form_last.optionA"
                        @blur="
                          () => {
                            $refs.optionA.onFieldBlur();
                          }
                        "
                      />
                    </a-form-model-item>
                    <a-form-model-item
                      ref="optionB"
                      label="错误选项"
                      prop="optionB"
                    >
                      <a-input
                        v-model="form_last.optionB"
                        @blur="
                          () => {
                            $refs.optionB.onFieldBlur();
                          }
                        "
                      />
                    </a-form-model-item>
                    <a-form-model-item label="答案" prop="answer" ref="answer">
                      <a-radio-group v-model="form.is_single_checkbox">
                        <a-radio-button value="A"> 正确</a-radio-button>
                        <a-radio-button value="B"> 错误</a-radio-button>
                      </a-radio-group>
                    </a-form-model-item>
                  </div>
                  <a-form-model-item>
                    <a-button
                      type="primary"
                      class="btn_finish_questions"
                      @click="finsh_questions"
                    >
                      完成
                    </a-button>
                  </a-form-model-item>
                </a-form-model>
              </a-tab-pane>
            </a-tabs>
          </a-form-model>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      type_list: [],
      // --
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        level: "",
        category: undefined,
        type: "0", //题目类型 单选 多选, 等
        content: "",
        // 单选情况 选择非数组的第一个元素 answers是数组
        is_single_checkbox: "",
      },
      form_last: {
        optionA: "", //也可能是判断题
        optionB: "", //也可能是判断题
        optionC: "",
        optionD: "",
        answer: [],
      },
      rules: {
        category: [
          {
            required: true,
            message: "请选择题目分类",
            trigger: "blur",
          },
        ],
        // answer
        answer: [
          {
            required: true,
            message: "请填写答案",
            trigger: "blur",
          },
        ],
        optionA: [
          {
            required: true,
            message: "请填入选项",
            trigger: "blur",
          },
        ],
        optionB: [
          {
            required: true,
            message: "请填入选项",
            trigger: "blur",
          },
        ],
        level: [
          {
            required: true,
            message: "请选择题目难度",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "请填写题目类别",
            trigger: "blur",
          },
        ],
      },
      categoryId: "",
      // --
      allowToNextTab: false,
      // 当前进度条的索引
      currentIndex: 0,
      //Tab Key
      activeKey: "1",
      mode: "left",
      // 搜索框内容
      record: {},
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      // 获取下拉框中的 题库分类选项
      const { data: res } = await this.$http.get("/question/category/all");
      this.type_list = res.data;
      // 将默认题库从下拉框中删除
      this.type_list = this.type_list.filter((item) => {
        return item.name != "默认题库";
      });

      if (this.$route.params.record) {
        this.record = this.$route.params.record;
        console.log("record", this.record);
        if (this.record.answers.length == 1) {
          // 单选
          this.form.is_single_checkbox = this.record.answers[0];
        }
        const { data: res2 } = await this.$http.get(
          `/admin/question/${this.record.id}`
        );
        // category 是一个本文框, 当我选择一个select的时候 他实际显示的指是一个id
        // 当我不选择的时候 将后端的数 直接放到category中显示的时候 他实际上是一个文字
        if (res2.code == 200) {
          this.form.level = res2.data.level;
          this.form.type = res2.data.type.toString();
          this.form.content = res2.data.content;
          this.form.category = res2.data.category;
          this.form_last.answer = res2.data.answers;
          this.form_last.optionA = res2.data.options.A;
          this.form_last.optionB = res2.data.options.B;
          this.form_last.optionC = res2.data.options.C || "";
          this.form_last.optionD = res2.data.options.D || "";
        }
      }
    },

    // 第二个panne 跳转到第三个panne
    toNextPane() {
      if (this.form.content != "") {
        this.change("3");
      } else {
        this.openNotificationWithIcon("info");
      }
    },
    // 从第一个 Tab  跳转到 第二个Tab
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.allowToNextTab = true; //允许到下一页
          this.change("2");
        } else {
          this.openNotificationWithIcon("info");
          return false;
        }
      });
    },
    resetForm() {
      // 清空两个表单
      this.$refs.ruleForm.resetFields();
      this.$refs.ruleForm2.resetFields();
      this.form_last.optionC = "";
      this.form_last.optionD = "";
      this.form_last.optionA = "";
      this.form_last.optionB = "";
      this.form.type = "";
      this.form.content = "";
    },
    //   tab栏回调
    change(val) {
      // 不点击 下一页 直接点击 跳转
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.allowToNextTab = true;
        }
      });
      if (this.activeKey < val) {
        //往后跳转要进行验证
        if (this.allowToNextTab) {
          //如果填写项 通过的了验证 就跳转
          // 返回下一个列表 索引对应
          this.currentIndex = Number(val) - 1;
          this.activeKey = val; //active 控制跳转 若表单不完整 不显示跳转
          this.allowToNextTab = false; //重置
        } else {
          //   如果参数没填写全 就想着跳转
          this.openNotificationWithIcon("info");
        }
      } else {
        //如果往前跳 就不考虑
        if (this.allowToNextTab) {
          //如果填写项 通过的了验证 就跳转
          // 返回下一个列表 索引对应
          this.currentIndex = Number(val) - 1;
          this.activeKey = val; //active 控制跳转 若表单不完整 不显示跳转
          this.allowToNextTab = false; //重置
        }
      }
    },
    // 消息提醒模态
    openNotificationWithIcon(type) {
      if (type == "info") {
        this.$notification[type]({
          message: "存在未知错误",
          description: "可能是由于填写信息没有通过校验所导致,请重新核查",
        });
      } else if (type == "success") {
        this.$notification[type]({
          message: "操作成功",
        });
      }
    },
    // 新增按钮触发
    async finsh_questions() {
      // 新增操作
      if (!this.$route.params.record) {
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            if (this.form.type != 2) {
              //除了多选框选中 answer 默认是数组 单选框默认是元素
              this.form_last.answer = [];
              this.form_last.answer.push(this.form.is_single_checkbox);
            }
            let opt = {};
            let contents = this.removeTAG(this.form.content);
            opt.A = this.form_last.optionA;
            opt.B = this.form_last.optionB;
            opt.C = this.form_last.optionC;
            opt.D = this.form_last.optionD;
            const { data: res } = await this.$http.post("/admin/question", {
              type: this.form.type,
              categoryId: this.form.category,
              content: contents,
              options: opt,
              answers: this.form_last.answer,
              level: this.form.level,
            });
            if (res.code == 200) {
              this.openNotificationWithIcon("success");
              this.$router.push({
                path: "/questionsDetail",
              });
            }
          }
        });
      }
      //有传值 则选择更新接口
      else {
        let opt = {};
        let contents = this.removeTAG(this.form.content);

        // 调用接口 级联查找分类id
        const { data: res2 } = await this.$http.get("/question/category/all");
        res2.data.forEach((item) => {
          if (item.name == this.form.category) {
            this.categoryId = item.id;
          }
        }); //找到对应的名字的分类id
        // 对于不同 type下 只有 answer 有变化
        // 如果是单选的情况下
        if (this.form.type != "2") {
          this.form_last.answer = [];
          this.form_last.answer.push(this.form.is_single_checkbox);
          if (this.form.type == "3") {
            console.log("16156");
            //判断题 将CD 选项取消内容
            this.form_last.optionC = "";
            this.form_last.optionD = "";
          }
        }
        // 对 opt这个临时对象 进行 key value 的填充
        opt.A = this.form_last.optionA;
        opt.B = this.form_last.optionB;
        opt.C = this.form_last.optionC;
        opt.D = this.form_last.optionD;
        const { data: res } = await this.$http.put("/admin/question", {
          id: this.$route.params.record.id,
          type: this.form.type,
          categoryId: this.categoryId,
          content: contents,
          options: opt,
          answers: this.form_last.answer,
          level: this.form.level,
        });
        if (res.code == 200) {
          this.common.notify("success", "修改成功");

          // this.$message.success("修改成功");
          this.$router.push({
            name: "questionsDetail",
          });
        }
      }
    },
    // 去除富文本编辑器中的标签
    removeTAG(str, len) {
      return str.replace(/<[^>]+>/g, "");
    },
  },
  computed: {
    allow_chooseC() {
      return this.form_last.optionC == ""; //如果C为空 就禁用 就不让选择 这个东西
    },
    allow_chooseD() {
      return this.form_last.optionD == ""; //D
    },
  },
  // 查询用户
};
</script>
<style  lang='less' scoped>
.container {
  box-sizing: border-box;
  display: flex;
  background-color: #eef1f2;
  padding: 35px 75px;
  .main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-items: center;
    background-color: #eef1f2;
    // box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    .main_content {
      padding: 20px;
      padding-top: 20px;
      width: 100%;
      height: 100%;
      background-color: #fff;
      border-radius: 10px;
      .main_header {
        display: flex;
        margin-bottom: 25px;
        .main_table {
          margin-top: 50px;
        }
      }
    }
  }
}
/deep/ .ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
  text-align: center;
}
/deep/ .ant-table-tbody > tr > td {
  text-align: left !important;
}
.disableColor {
  color: #eee;
}
li {
  list-style: none;
  margin-top: 10px;
}
.btn_finish {
  margin-top: 150px;
}
.btn_finish_questions {
  margin-top: 50px;
  margin-left: 350px;
}
</style>